import { GameMap } from "./game_map/base.js"
import { Kyo } from "./player/kyo.js"

class KOF {
    constructor(id, top = 0) {
        this.top = top;
        this.$kof = $("#"+id);
        this.$kof.append(`<div class="kof-header">
        <div class="kof-header-hp0"><div class="outer-hp"><div class="inner-hp"></div></div></div>
        <div class="kof-header-timer"></div>
        <div class="kof-header-hp1"><div class="outer-hp"><div class="inner-hp"></div></div></div>
        </div>
        `)
        this.init_css();
        // console.log(this.$kof);

        this.game_map = new GameMap(this);
        // 角色的数值应该是角色固有的，而不应该是前面向后面传递的
        // TODO
        this.players = [new Kyo(this, {
            id: 0,
            x: 200,
            y: 0,
            width: 120,
            height: 200,
            color: "red",
            ax: 400,
            ay: -1500,
        }), 
        new Kyo(this, {
            id: 1,
            x: 900,
            y: 0,
            width: 120,
            height: 200,
            color: "blue",
            ax: 400,
            ay: -1500,
        })];
    }

    init_css() {
        this.$kof.css({
            "width": "1280px",
            "height": "720px",

            "background-image": 'url("/static/image/background/0.gif")',
            "background-size": "200% 100%",
            "background-position": "top",
            "position": "absolute",
            "top":  `${this.top}px`,
            "border" : "none"
        })

        this.$kof_header = this.$kof.find(".kof-header");
        this.$hp0 = this.$kof_header.find(".kof-header-hp0");
        this.$hp1 = this.$kof_header.find(".kof-header-hp1");
        this.$timer =  this.$kof_header.find(".kof-header-timer");

        this.$kof_header.css({
            width: "100%",
            height: "80px",
            position: "absolute",
            top: 0,
            display: "flex",
            // "justify-content": "center",
            "align-items": "center",
            // "background-color": "lightgreen",
        }) 

        this.$hp0.css ({
            height: "40px",
            width: "calc(50% - 60px)",
            "margin-left": "20px",
            border: "white 3px solid",
            "border-right": "none",
            "box-sizing": "border-box",
            // "background-color": "lightgreen"

        })

        this.$hp1.css ({
            height: "40px",
            width: "calc(50% - 60px)",
            border: "white 3px solid",
            "border-left": "none",
            "box-sizing": "border-box",
            // "background-color": "lightgreen"
        })

        this.$timer.css({
            height: "60px",
            width: "80px",
            "background-color": "orange",
            border: "white 5px solid",
            "box-sizing": "border-box",
            color: "white",
            "font-size": "30px",
            "font-weight": 800,
            "text-align": "center",
            "line-height": "50px",
            "user-select": "none",

        })

        this.$hp0_outer = this.$hp0.find(".outer-hp");
        this.$hp0_inner = this.$hp0_outer.find(".inner-hp");
        this.$hp1_outer = this.$hp1.find(".outer-hp");
        this.$hp1_inner = this.$hp1_outer.find(".inner-hp");

        // 子块背景颜色会覆盖父块
        this.$hp0_outer.css({
            width: "100%",
            height:"100%",
            "background-color": "red",
            float: "right",
        })

        this.$hp1_outer.css({
            width: "100%",
            height:"100%",
            "background-color": "red",
        })

        this.$hp0_inner.css({
            width: "100%",
            height:"100%",
            "background-color": "lightgreen",
            float: "right",
        })

        this.$hp1_inner.css({
            width: "100%",
            height:"100%",
            "background-color": "lightgreen",
        })

        this.$timer.text("60");
    }

    restart() {
        let [a, b] = this.players;
        a.hp = a.max_hp;
        b.hp = b.max_hp;
        a.flush_hp();
        b.flush_hp();
        a.status = b.status = 3;

        a.cur_frame_cnt = b.cur_frame_cnt = 0;
        this.game_map.time_left = GameMap.TIME_LEFT;
        a.x = 200, a.y = 0;
        b.x = 900, b.y = 0;
    }
}

export {
    KOF
}

